<!DOCTYPE html "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="signupForm">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">地区:</label>
                            <div class="col-sm-4" style="width: 50%">
                                <input id="areaIds" name="areaIds" class="form-control" type="hidden" maxlength="10"
                                       placeholder="" readonly>
                                <input id="areaNames" name="areaNames" class="form-control" type="text"
                                       maxlength="180" placeholder="" readonly="readonly" >
                            </div>
                            <div class="col-sm-4">
                                <button id="Modal" type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#roleModal" style="width:80px;height:36px;">选择
                                </button>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">首件数量：</label>
                            <div class="col-sm-4">
                                <input type="number" id="firstNums" name="firstNums"  maxlength="8"
                                       data-placeholder="首件数量" class="form-control"
                                       onkeyup="value=value.replace(/[^\d\.]/g,'')">
                            </div>
                            <label class="col-sm-2 control-label">首件费用：</label>
                            <div class="col-sm-4">
                                <input type="number" id="firstAmt" name="firstAmt"  maxlength="8"
                                       data-placeholder="首件费用" class="form-control"
                                       onkeyup="value=value.replace(/[^\d\.]/g,'')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">续件数量：</label>
                            <div class="col-sm-4">
                                <input type="number" id="secondNums" name="secondNums"
                                       data-placeholder="续件数量" class="form-control"
                                       onkeyup="value=value.replace(/[^\d\.]/g,'')">
                            </div>
                            <label class="col-sm-2 control-label">续件费用：</label>
                            <div class="col-sm-4">
                                <input type="number" id="secondAmt" name="secondAmt"
                                       data-placeholder="续件费用" class="form-control"
                                       onkeyup="value=value.replace(/[^\d\.]/g,'')">
                            </div>
                        </div>


                        <div class="text-right form-group">
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改用户角色模态框（Modal） -->
<div class="modal fade" id="roleModal" tabindex="-2" role="dialog" aria-labelledby="editRoleLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="editRoleLabel">
                    选择地区
                </h4>
            </div>
            <div class="modal-body row">
                <div class="col-xs-5">
                    未选择
                    <select name="multiselect" id="multiselect" class="js-multiselect form-control" size="8"
                            multiple="multiple" ondblclick="moveField('multiselect','js_multiselect_to_1');">
                        <option th:each="sysAreaCoord,appStat:${sysAreaCoords}"
                                th:value="${sysAreaCoord.id}"
                                th:text="${sysAreaCoord.name}"></option>
                    </select>
                </div>
                <div class="col-xs-2">
                    <div class="row">
                        <br/>
                        <br/>
                        <button type="button" id="js_right_All_1" class="btn btn-block"
                                onclick="moveAllField('multiselect','js_multiselect_to_1');"><i
                                class="glyphicon glyphicon-forward"></i></button>
                        <button type="button" id="js_right_Selected_1" class="btn btn-block"
                                onclick="moveField('multiselect','js_multiselect_to_1');"><i
                                class="glyphicon glyphicon-chevron-right"></i></button>
                        <button type="button" id="js_left_Selected_1" class="btn btn-block"
                                onclick="moveField('js_multiselect_to_1','multiselect');"><i
                                class="glyphicon glyphicon-chevron-left"></i></button>
                        <button type="button" id="js_left_All_1" class="btn btn-block"
                                onclick="moveAllField('js_multiselect_to_1','multiselect');"><i
                                class="glyphicon glyphicon-backward"></i></button>
                    </div>
                </div>
                <div class="col-xs-5">
                   已选择
                    <select name="js_multiselect_to_1" id="js_multiselect_to_1" class="form-control" size="8"
                            multiple="multiple" ondblclick="moveField('js_multiselect_to_1','multiselect');">
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="submitAreaCoord();">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div th:include="include::footer"></div>
<script type="text/javascript">
    $().ready(function () {
        validateRule();
    });

    function submitAreaCoord() {
        var areaId = $("#js_multiselect_to_1 option").map(function () {
            return $(this).val();
        }).get().join(",");
        var areaName = $("#js_multiselect_to_1 option").map(function () {
            return $(this).text();
        }).get().join(",");
        $("#areaIds").val(areaId);
        $("#areaNames").val(areaName);
        $('#roleModal').modal('hide');
    }
    

    $.validator.setDefaults({
        submitHandler: function () {
            save();
        }
    });


    function save() {
        $.ajax({
            cache: true,
            type: "POST",
            url: "/app/shipFeeCfg/save",
            data: $('#signupForm').serialize(), // 你的formid
            async: false,
            success: function (data) {
                layer.msg("操作成功");
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);
            }
        });
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                areaNames:{
                    required: true
                },
                firstNums: {
                    required: true
                },
                firstAmt: {
                    required: true
                },
                secondNums: {
                    required: true
                },
                secondAmt: {
                    required: true
                }
            },
            messages: {
                areaNames:{
                    required: icon + "必填"
                },
                firstNums: {
                    required: icon + "必填"
                },
                firstAmt: {
                    required: icon + "必填"
                },
                secondNums: {
                    required: icon + "必填"
                },
                secondAmt: {
                    required: icon + "必填"
                }
            }
        })
    }

</script>
</body>
</html>